<template>
  <div class="menu-wrapper">
    <el-menu-item
      class="specialSideBar changeHover"
      :index="offen.path"
      @click="open(offen)"
      :key="offen.name"
      :class="{'is-active':vaildActive(item)||$store.state.tabs.currentSide=='/offen'}"
      >
      <div class="iconImg">
        <i :class="offen.icon"></i>
      </div>
      <p slot="title"
         :alt="offen.path">{{generateTitle(offen)}}</p>
    </el-menu-item>
    <template v-for="item in menu">
      <el-menu-item
                    :index="item[pathKey]"
                    @click="open(item)"
                    :key="item[labelKey]"
                    v-if="item.children&&item.children.length>0&&item.children.some(it=>{return it.isShow})"
                    :class="{'is-active':vaildActive(item)||nowTagValue.includes(item.path)}">
                    <!-- 项目选中俩 -->
        <div class="iconImg">
          <i :class="item[iconKey]"></i>
        </div>
        <p slot="title"
              :alt="item[pathKey]">{{generateTitle(item)}}</p>
      </el-menu-item>
    </template>
  </div>
</template>
<script>
  import {mapGetters} from "vuex";
  import {isURL, validatenull} from "@/util/validate";
  import config from "./config.js";

  export default {
    name: "sidebarItem",
    data() {
      return {
        config: config,
        offen:{
          children:this.$store.state.tabs.offenList||[],
          icon: "el-icon-s-grid",
          meta: {keepAlive: true},
          name: "自助",
          path: "/offen",
          isShow:1,
        },
      };
    },
    props: {
      menu: {
        type: Array
      },
      screen: {
        type: Number
      },
      first: {
        type: Boolean,
        default: false
      },
      props: {
        type: Object,
        default: () => {
          return {};
        }
      },
      collapse: {
        type: Boolean
      }
    },
    created() {
    },
    mounted() {
    },
    computed: {
      ...mapGetters(["roles"]),
      labelKey() {
        return this.props.label || this.config.propsDefault.label;
      },
      pathKey() {
        return this.props.path || this.config.propsDefault.path;
      },
      iconKey() {
        return this.props.icon || this.config.propsDefault.icon;
      },
      childrenKey() {
        return this.props.children || this.config.propsDefault.children;
      },
      isOpenKey() {
        return this.props.isOpen || this.config.propsDefault.isOpen;
      },
      nowTagValue() {
        return this.$router.$avueRouter.getValue(this.$route);
      }
    },
    methods: {
      generateTitle(item) {
        return this.$router.$avueRouter.generateTitle(
          item[this.labelKey],
          (item.meta || {}).i18n
        );
      },
      vaildActive(item) {
        if (this.validIsOpen(item)) {
          return false;
        }
        const groupFlag = item?(item["group"] || []).some(ele =>
          this.$route.path.includes(ele)
        ):false;
        return  this.nowTagValue ===item?item[this.pathKey]:'' ||groupFlag;
      },
      vaildRoles(item) {
        item.meta = item.meta || {};
        return item.meta.roles ? item.meta.roles.includes(this.roles) : true;
      },
      validatenull(val) {
        return validatenull(val);
      },
      validIsOpen(item) {
        if (item&&item[this.isOpenKey] === 2 && isURL(item[this.pathKey])) {
          return true;
        }
      },
      open(item) {
        if(item.path == '/offen'){
          let list = JSON.parse(JSON.stringify(this.$store.state.tabs.offenList))
          list.push({
            isShow:0,
            type:'none',
            hide:true
          })
          this.offen.children = list
        }
        this.$store.commit('SET_CURRENT_SIDE',item.path)
        if (this.screen <= 1) this.$store.commit("SET_COLLAPSE");
        if (this.validIsOpen(item)) {
          window.open(item[this.pathKey]);
        }
        console.log('侧边===',item.children)
        this.$store.commit("SET_TAB_LIST",item.children);
        // else {
        //   this.$router.$avueRouter.group = item.group;
        //   this.$router.$avueRouter.meta = item.meta;
        //   this.$router.push({
        //     path: this.$router.$avueRouter.getPath({
        //       name: item[this.labelKey],
        //       src: item[this.pathKey]
        //     }, item.meta),
        //     query: item.query
        //   });
        //
        // }
      }
    }
  };
</script>

